<style>
  @media print {
    ._wz_grade {
      -webkit-print-color-adjust: exact;
      height: inherit !important;
    }
  }
</style>
<template>
  <div class="_wz_grade" ref="grade">
    <div style="text-align: center;font-size: 24px!important;line-height: 50px!important;letter-spacing: 1px!important;font-weight: 900;">{{selectData.deptName}}</div>
    <Button type="primary" @click="printTest" class="no-print" style="position: fixed;right: 20px;top: 70px;z-index: 9;" v-if="!printStatus">打印</Button>
    <div style="letter-spacing: 8px;font-size: 20px;font-weight: 700;line-height: 50px;text-align:center;color: #333;">
      考试记录表
    </div>
    <table style="font-size: 12px;" cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="13%">
        <col>
        <col width="13%">
        <col>
        <col width="13%">
        <col>
      </colgroup>
      <tbody>
      <tr>
        <td>考生姓名</td>
        <td style="color:#2d8cf0;">{{selectData.driverName}}</td>
        <td>身份证号</td>
        <td style="color:#2d8cf0;">{{selectData.driverIdentifyNum}}</td>
        <td>从业类型</td>
        <td style="color:#2d8cf0;">{{selectData.driverTypeName}}</td>
      </tr>
      <tr>
        <td>考试名称</td>
        <td style="color:#2d8cf0;">{{selectData.materialExamName}}</td>
        <td>考试方向</td>
        <td style="color:#2d8cf0;">{{selectData.examPlanDirectionName}}</td>
        <td>考试时间</td>
        <td style="color:#2d8cf0;">{{parseInt(selectData.examStudentUseDuration / 60)}} 分钟 {{selectData.examStudentUseDuration % 60}} 秒</td>
      </tr>
      <tr>
        <td>满分</td>
        <td style="color:#2d8cf0;">{{selectData.examStudentTotalScore}}</td>
        <td>及格分</td>
        <td style="color:#2d8cf0;">{{selectData.examStudentPassScore}}</td>
        <td>得分</td>
        <td style="color:#2d8cf0;">{{selectData.examStudentScore}}</td>
      </tr>
      <tr>
        <td>题数</td>
        <td style="color:#2d8cf0;">{{selectData.examStudentAmount}}</td>
        <td>正确</td>
        <td style="color:#2d8cf0;">{{selectData.examStudentCorrect}}</td>
        <td>错误</td>
        <td style="color:#2d8cf0;">{{selectData.examStudentWrong}}</td>
      </tr>
      <tr>
        <td>运输企业</td>
        <td colspan="2" style="color:#2d8cf0;">{{selectData.deptName}}</td>
        <td>考试时间</td>
        <td colspan="2" style="color:#2d8cf0;">
          <span v-if="!!!selectData.examStudentSubmitTime && !!!selectData.examStudentAnswerTime">还没参加本课件培训</span>
          <span v-else>
            <span style="margin:0 5px 0 0;">{{selectData.examStudentSubmitTime}}</span>
              -
            <span style="margin:0 0 0 5px;">{{selectData.examStudentAnswerTime}}</span>
          </span>
        </td>
      </tr>
      <tr>
        <td>正确/错误</td>
        <td colspan="5">
          <template v-for="item,index in selectData.examStudentPlanDetailList">
            <span v-if="item.correctResult == 0" style="display: inline-block;width: 20px;height: 20px;background: #ed4014;margin: 5px;border-radius: 3px;text-align: center;line-height: 20px;color: #fff;font-size: 12px;">{{index+1}}</span>
            <span v-else-if="item.correctResult == 1" style="display: inline-block;width: 20px;height: 20px;background: #19be6b;margin: 5px;border-radius: 3px;text-align: center;line-height: 20px;color: #fff;font-size: 12px;">{{index+1}}</span>
            <span v-else style="display: inline-block;width: 20px;height: 20px;background: #ccc;margin: 5px;border-radius: 3px;text-align: center;line-height: 20px;color: #fff;font-size: 12px;">{{index+1}}</span>
          </template>
        </td>
      </tr>
      <tr>
        <td>考试证明</td>
        <td colspan="5">
          <div v-if="selectData.imgList.length > 0">
            <div class="demo-upload-list" v-for="item in selectData.imgList">
              <viewer style="width: 100%;height: 100%;">
                <img :src="apiUrl.imgUrl+item" @error="public.imgDispose" />
              </viewer>
            </div>
            <h6 style="clear: both;"></h6>
          </div>
          <div v-else>暂无培训证据</div>
        </td>
      </tr>
      </tbody>
    </table>



    <div style="margin: 10px 0 0 0;">
      <Collapse>
        <Panel>
          答题信息
          <div slot="content">
            <template v-for="item,index in selectData.examStudentPlanDetailList">
            <Alert style="margin: 0 0 10px 0;"  :type="item.choiceAnswer == item.correctAnswer?'success':'error'">
              第{{index + 1}}题：{{item.materialExamQuestionDescription}}
              <span style="margin:0 0 0 10px;">({{item.materialExamQuestionSource}}分)</span>
              <template slot="desc">
                <div style="padding: 0 10px;line-height: 30px;">
                  <Row>
                    <i-col span="12" v-if="!!item.materialExamQuestionOptionA" style="padding: 0 5px;">A.{{item.materialExamQuestionOptionA}}</i-col>
                    <i-col span="12" v-if="!!item.materialExamQuestionOptionB" style="padding: 0 5px;">B.{{item.materialExamQuestionOptionB}}</i-col>
                  </Row>
                  <Row>
                    <i-col span="12" v-if="!!item.materialExamQuestionOptionC" style="padding: 0 5px;">C.{{item.materialExamQuestionOptionC}}</i-col>
                    <i-col span="12" v-if="!!item.materialExamQuestionOptionD" style="padding: 0 5px;">D.{{item.materialExamQuestionOptionD}}</i-col>
                  </Row>
                  <Row>
                    <i-col span="12" style="padding: 0 5px;">【所选答案】：{{item.choiceAnswer}}</i-col>
                    <i-col span="12" style="padding: 0 5px;">【正确答案】：{{item.correctAnswer}}</i-col>
                  </Row>

                  <p v-if="item.explanation" style="padding: 0 5px;">【参考解析】：{{item.explanation}}</p>
                </div>
              </template>
            </Alert>
          </template>
          </div>
        </Panel>
      </Collapse>
    </div>
  </div>
</template>
<script>
  export default {
    props: ["selectData",'printStatus'],//接收来自父组件的数据
    data() {
      return {

      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态

    },
    methods: {//执行的方法

      printTest() {
        this.$print(this.$refs.grade) // 使用
      }
    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_grade {
    position: relative;
    max-width: 1024px;
    margin: auto;

    table {
      border-top: 1px solid #515a6e;
      border-left: 1px solid #515a6e;
      width: 100%;

      td {
        min-width: 0;
        height: 40px;
        box-sizing: border-box;
        text-align: left;
        text-overflow: ellipsis;
        border-right: 1px solid #515a6e;
        border-bottom: 1px solid #515a6e;
        padding-left: 12px;
        padding-right: 12px;
      }
    }


    .demo-upload-list {
      float: left;
      margin: 10px;
      display: block;
      width: 100px;
      height: 132px;
      text-align: center;
      line-height: 60px;
      border: 1px solid transparent;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

      img {
        width: 100%;
        height: 100%;
      }
    }
  }


</style>
